<template>
    <div class="ygg-radio" @click="handleClick">
        <div class="ygg-radio-wrapper">
            <ygg-icon :icon="inactiveIcon" :class="{'ygg-icon-active':!isActive}"/>
            <ygg-icon :icon="activeIcon" :class="{'ygg-icon-active':isActive}"/>
        </div>
        <span class="ygg-radio-label">{{label}}</span>
    </div>
</template>

<script>
    import YggIcon from "../ygg-icon";

    export default {
        name: "ygg-radio",
        components: {YggIcon},
        inject: {
            radioGroup: {default: null}
        },
        props: {
            label: {type: String},
            value: {default: false},
            val: {},

            activeIcon: {default: 'pl-circle-radio'},
            inactiveIcon: {default: 'pl-circle'},

            trueValue: {default: true},
            falseValue: {default: false},
        },
        watch: {
            value(val) {
                if (this.p_value !== val) this.p_value = val
            },
        },
        data() {
            return {
                p_value: this.value,                 // 判断是否选中
            }
        },
        computed: {
            isActive() {
                if (this.radioGroup) {
                    return this.radioGroup.isActive(this)
                } else {
                    return this.p_value === this.trueValue
                }
            }
        },
        created() {
            if (!!this.radioGroup) {
                this.radioGroup.addChild(this)
            }
        },
        beforeDestroy() {
            if (!!this.radioGroup) {
                this.radioGroup.removeChild(this)
            }
        },
        methods: {
            handleClick() {
                if (this.radioGroup) {
                    this.radioGroup.handleClick(this)
                } else {
                    this.p_value = this.isActive ? this.falseValue : this.trueValue
                }
                this.$emit('input', this.p_value)
            },
        }
    }
</script>

<style lang="scss">
    .ygg-radio {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        user-select: none; // 禁用多次点击选中文字

        &:hover {
            cursor: pointer;
        }

        .ygg-radio-wrapper {
            position: relative;
            width: 1em;
            height: 1em;
            margin-right: 0.5em;

            & > *:nth-child(1) {
                color: #999;
            }

            & > *:nth-child(2) {
                color: #42b983;
            }

            /*    适合于只有两个子对象的div
            &:first-child {}
            &:last-child {}   */


            .ygg-icon {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                transform: scale(0.5);
                transition: all 0.15s linear;

                &.ygg-icon-active {
                    opacity: 1;
                    transform: scale(1);
                }
            }
        }
    }
</style>
